<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="lookAround :: htmlhead" th:with="title='favorites'"></head>
<body th:onload="'lookAroundInit();'">

<!-- Theme CSS -->
<link href="../../index/css/freelancer.min.css" rel="stylesheet" />
<div th:replace="fragments/alert :: alert">alert</div>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
      </button>
      <a class="navbar-brand" href="/index">云收藏</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <li>
          <a href="/login" th:unless="${user != null}">登录</a>
          <a href="/" th:if="${user != null}" th:text="${user.userName}" class="userName"></a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="wrapper">
  <section style="margin-left:0;">
    <div class="content-wrapper">
      <div class="row">
        <div id="lookAround" class="col-lg-12 col-md-12">
          <div id="standard" th:if="${collects.size() > 0}" style="margin-top: 45px;">
            <ul class="timeline-alt" id="collectStandardList">

              <li th:each="collect,collectStat : ${collects}" >

                <a th:href="'/collector/' + ${collect.userId} + '/0'" class="hidden-xs timeline-badge sharing-user-avatar" th:style="'background-image:url(' + @{(${collect.profilePicture}=='' ? 'img/favicon.png' : '../../' + ${collect.profilePicture})} + ')'"></a>
                <div class="timeline-panel">
                  <div class="popover right">
                    <div class="arrow"></div>
                    <div class="popover-content">
                      <div class="table-grid">
                        <div class="col">

                          <div class="m0">
                            <a href="#" class="text-muted" th:text="${collect.userName}">user name</a>
                            <small th:if="${type != 'explore'}" class="ml-sm text-muted" th:text="${collect.collectTime}">6天前  </small>
                          </div>
                        </div>
                      </div>

                      <!--<div class="m0" th:text="${collect.remark}"></div>-->
                      <div class="media resource-card-thumbnail">
                        <a  th:href="@{${collect.url}}" class="pull-left" target="_blank">
                          <div class="media-object resource-card-image"  th:style="'background-image:url(' + @{(${collect.logoUrl}=='' ? 'img/favicon.png' : ${collect.logoUrl})} + ')'" ></div>
                        </a>
                        <div class="media-body">
                          <h4 class="visible-xs media-heading resource-card-title-xs">
                            <a target="_blank" th:href="@{${collect.url}}" th:text="${collect.title}">title</a>
                          </h4>

                          <h3 class="hidden-xs media-heading resource-card-title">
                            <a target="_blank" th:href="@{${collect.url}}" th:text="${collect.title}">title</a>
                          </h3>

                          <div class="hidden-xs resource-card-content">
                            <p  th:text="${collect.description}">description</p>
                          </div>
                        </div>
                      </div>

                      <div class="m0">
                        <span class="mr-sm"></span>
                        <!--<a th:href="'/standard/' + ${collect.favoritesId} + '/' + ${collect.userId}" class="normal-color-a ng-binding"   th:text="${collect.favoriteName}">文件加名称</a>-->
                        <div class="pull-right hidden-xxs">
                            <a th:id="'like' + ${collect.id}" class="sharing-action-button" th:style="'display:' + @{(${collect.Praise} ? 'none' : 'inline-block')} + ''"    th:onclick="'changeLike(' + ${collect.id} + ');'">
                              <span class="fa fa-thumbs-o-up"></span>
                              <show th:id="'likeS' + ${collect.id}"  th:text="|点赞(${collect.praiseCount})|" ></show>
                            </a>
                            <if style="display:none"  >
                              |
                            </if>

                            <a th:id="'unlike' + ${collect.id}" class="sharing-action-button" th:style="'display:' + @{(${collect.Praise} ? 'inline-block' : 'none')}+ ''"    th:onclick="'changeLike(' + ${collect.id} + ');'">
                              <span class="fa fa-thumbs-up"></span>
                              <show th:id="'unlikeS' + ${collect.id}" th:text="|取消点赞(${collect.praiseCount})|"></show>
                            </a>

                            <input th:id="'praiseC' + ${collect.id}" type="hidden" name="praiseC" th:value="${collect.praiseCount}" />
                            <input th:id="'commentC' + ${collect.id}" type="hidden" name="commentC" th:value="${collect.commentCount}" />
                            |
                            <a class="sharing-action-button btn-comment" href="javascript:void(0);" th:onclick="'switchComment(' + ${collect.id} + ');'" >
                              <span class="fa fa-comment-o"></span>
                              <show th:id="'commentS' + ${collect.id}" th:text="|评论(${collect.commentCount})|">	 评论(0)</show>
                            </a>

                            <if th:if="${userId != collect.userId}" >
                              |
                            </if>
                            <a th:if="${userId != collect.userId}" class="sharing-action-button" th:onclick="'getCollect(' + ${collect.id} + ',\'\');'" >
                              <span class="fa fa-spoon"></span>
                              收藏
                            </a>
                          </small>
                        </div>
                      </div>

                      <div class="collapse" th:id="'collapse' + ${collect.id}">
                        <comments th:id="'commentList' + ${collect.id}"></comments>
                        <div class="media p0" th:id="'comment' + ${collect.id}">
                          <div class="media-body">
                            <form>
                              <div class="input-group">
                                <input th:id="'commentContent' + ${collect.id}"   type="text" placeholder="输入评论..." class="form-control"/>
                                <span class="input-group-btn">
                                                   <button class="btn btn-default" type="button" th:onclick="'comment(' + ${collect.id} + ');'" >发送</button>
                                 </span>
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <div class="loading-wrap">
              <input type="hidden"  id="userId" th:value="${userId}" />
              <button  id="loadStandardMore" class="mt-lg btn btn-primary btn-block" style="display:none;">加载更多</button>
              <div id="loadingStandard" style="text-align:center;margin:20px;"><img src="/img/loading.gif" width="64" height="64" /></div>
            </div>
          </div>
          <style>
            #collectStandardList {
              width: 800px;
              margin: 0 auto;
            }
            #collectStandardList .resource-card-thumbnail {
              height: auto;
            }
            #collectStandardList .media > .pull-left {
              padding-right: 20px;
            }
            #collectStandardList .resource-card-image {
              width: 80px;
              height: 60px;
            }
            #collectStandardList .media-heading {
              font-size: 16px;
              line-height: 24px;
            }
            .loading-wrap {
              width: 800px;
              margin: 0 auto;
              padding-left: 60px;
            }
          </style>
        </div>
      </div>
    </div>
  </section>
  <footer style="margin-left:0;">
    <span>&copy; 2016 - 2018</span>
    <span class="pull-right">
	                  云收藏 | 让收藏更简单
	    </span>
  </footer>
</div>
<script type="text/javascript" src="/webjarslocator/jquery/jquery.min.js"></script>
<script th:src="@{/vendor/jquery.form/jquery.form.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.6/dist/js/bootstrap.min.js}"></script>
<script th:src="@{/vendor/modernizr/modernizr.custom.js}" ></script>
<script th:src="@{/vendor/jQuery-Storage-API/jquery.storageapi.js}" ></script>
<script th:src="@{/vendor/jquery.flexslider/jquery.flexslider.min.js}"></script>
<script th:src="@{/media/js/app.js}" ></script>
<script th:src="@{/js/comm.js}" ></script>
<script th:src="@{/js/collect.js}" ></script>
<script th:src="@{/vendor/parsleyjs/dist/parsley.min.js}"></script>
<script th:src="@{/webjars/vue/1.0.24/vue.min.js}"></script>
<script th:src="@{/webjars/vue-resource/0.7.0/dist/vue-resource.min.js}"></script>
<script th:src="@{/vendor/toastr/toastr.min.js}"></script>
<script th:src="@{/js/lookAround.js}" ></script>
<script th:src="@{/index/js/freelancer.min.js}"></script>

<script>
  (function($) {
    $('body').scrollspy({
      target: '.navbar-fixed-top',
      offset: 51
    });
    $('#mainNav').affix({
      offset: {
        top: 100
      }
    })
  })(jQuery);
   $(".slider").flexslider({
      animation: "side",
      slideshowSpeed: 3000,
      pauseOnHover: true,
      directionNav: true,
      controlNav: true,
      prevText: "&lt;",
      nextText: "&gt;"
   });
</script>
</body>
</html>